<template>
  <div>
    <div class="scrollPicture" style="margin-bottom: 20px">
    <el-carousel height="250px">
      <el-carousel-item v-for="item in this.imgUrl" :key="item">
        <el-image :src="item"></el-image>
        <img src=item>
      </el-carousel-item>
    </el-carousel>
    </div>

    <div class="commodityHotItem">
      <div style="text-align: left; margin-left: 20px">
        <h3>最热商品</h3>
      </div>
      <el-row>
        <el-col :span="5" v-for="item in this.totalDate2" :key="item.id" style="margin: 15px">
          <el-card :body-style="{ padding: '0px' }" shadow="hover" >
            <!--          <img :src="item.iconUrl" class="image" height="200px">-->
            <el-image
                style="width: 200px; height: 200px"
                :src="item.iconUrl" @click.native="details(item)"></el-image>
            <div style="padding: 14px; background-color:#eef1f6">
              <span>{{ item.name }}</span>
              <h4>{{item.price}}元</h4>
              <div class="addBottom" style="margin: 10px">
                <el-button round size="small" @click="addCar(item)" plain>添加购物车</el-button>
                <el-button icon="el-icon-star-off" circle size="small"></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="commodityItem">
      <div style="text-align: left; margin-left: 20px">
        <h3>全部商品</h3>
      </div>
    <el-row>
      <el-col :span="5" v-for="item in this.totalDate" :key="item.id" style="margin: 15px">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" >
<!--          <img :src="item.iconUrl" class="image" height="200px">-->
          <el-image
              style="width: 200px; height: 200px"
              :src="item.iconUrl" @click.native="details(item)"></el-image>
          <div style="padding: 14px; background-color:#eef1f6">
            <span>{{ item.name }}</span>
            <h4>{{item.price}}元</h4>
            <div class="addBottom" style="margin: 10px">
              <el-button round size="small" @click="addCar(item)" plain>添加购物车</el-button>
              <el-button icon="el-icon-star-off" circle size="small"></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
    <el-dialog title="产品信息" :visible.sync="dialogTableVisible">
      <h1>{{this.commodityItem.name}}</h1>
      <el-image
          style="width: 150px; height: 150px"
          :src="this.commodityItem.iconUrl" fit="contain"></el-image>
      <h3>简介：{{this.commodityItem.detail}}</h3>
      <h3>库存：{{this.commodityItem.stock}}</h3>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CommodityShow",
  data(){
    return{
      imgUrl:{
        url1:require('@/assets/roll/roll1.jpg'),
        url2:require('@/assets/roll/roll2.jpg'),
        url3:require('@/assets/roll/roll3.jpg')
      },
      total:null,
      totalDate:null,
      totalDate2:null,
      commodityItem: {
        name:null,
        iconUrl:null,
        detail:null,
        stock:null,
      },
      dialogTableVisible: false,
    }
  },
  methods:{
    details(item){
      this.commodityItem=item;
      this.dialogTableVisible = true
    },
    addCar(item){
      const _this=this;
      axios.get('http://localhost:8181/cart/add/'+this.$store.state.account+'/'+item.id).then(function (resp){
        if(resp.data==0){
          _this.$message.error('添加失败!');
        }else{
          _this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }
      })
    }
  },
  created() {
    const _this=this;
    axios.get('http://localhost:8181/product/findAllGoods/'+1+'/'+100).then(function(resp){
      _this.totalDate=resp.data.data
      _this.total=resp.data.totalNum
    })

    axios.get('http://localhost:8181/product/findAllHot').then(function(resp){
      console.log(resp);
      _this.totalDate2=resp.data.data
    })
  }
}
</script>

<style scoped>

</style>